<template>
	<view class="page tn-safe-area-inset-bottom">
		<view class="top-bg"></view>
		<!-- <dawnBar title="支付完成"></dawnBar> -->
		<view class="page-container">
			<view class="dawn-success tn-bg-white dawn-shadow dawn-radius">
				<view v-if="success === 1" class="dawn-success__icon tn-icon-success-circle-fill"></view>
				<view v-else-if="success === 2" class="dawn-success__icon-fail tn-icon-close-circle"></view>
				<view v-else class="dawn-success__icon tn-icon-loading"></view>
				<view class="dawn-success__title tn-margin-bottom-xs" style="color: black;padding: 20rpx;">
					{{ successTitle }}
				</view>
				<view class="dawn-success__btn" v-if="success!==0">
					<tn-button @click="navDetail()" class="dawn-btn-lg dawn-btn-lg__pay">
						<text class="tn-icon-image-text-fill tn-padding-right-xs"></text>
						<text>订单信息</text>
					</tn-button>
				</view>
				<view class="dawn-success__btn" v-if="success!==0">
					<tn-button @click="goHome()" class="dawn-btn-lg dawn-btn-lg__main">
						<text class="tn-icon-home-fill tn-padding-right-xs"></text>
						<text>返回首页</text>
					</tn-button>
				</view>
			</view>
			<view v-if="orderInfo.orderName">

				<view class="list-item tn-main-gradient-dawn tn-margin-top-sm">
					<view class="tn-flex tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
						<view>
							<view class="tn-color-white">
								<text>订单金额</text>
							</view>
							<view class="tn-color-white tn-padding-top">
								<text style="margin-left: -6rpx;">￥</text>
								<text class="tn-text-bold" style="font-size: 55rpx;">{{ orderInfo.fee || orderInfo.totalCost}}</text>
							</view>
						</view>
						<view>
							<view class="tn-color-white">
								<view class="tn-padding-bottom-sm">
									<text class="tn-padding-right-xs"
										style="padding-left: 30rpx;opacity: 0.7;">姓名</text>
									{{ orderInfo.patientName }}
								</view>
								<view class="tn-padding-bottom-sm">
									<text class="tn-padding-right-xs" style="opacity: 0.7;">病人ID</text>
									{{ orderInfo.patientId }}
								</view>
								<view class="tn-padding-bottom-sm" v-if="orderInfo.orderName === '病案复印'">
									<text class="tn-padding-right-xs" style="opacity: 0.7;">住院号</text>
									{{ orderInfo.hospitalNo }}
								</view>
								<view class="tn-padding-bottom-sm" v-else >
									<text class="tn-padding-right-xs" style="opacity: 0.7;">门诊号</text>
									{{ orderInfo.clinicNo }}
								</view>
							</view>
						</view>
					</view>
					<view class="dawn-line tn-margin-top-sm"></view>
					<view
						class="tn-margin-top-sm tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
						<view class="justify-content-item tn-text-df">
							<text class="tn-icon-time-fill"></text>
							<text class="">{{ formatDateTime(orderInfo.payTime)  || '' }}</text>
						</view>
						<view
							class="tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right op-box">
							<!-- <view
								class="tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right op-box">
								<tn-button @click="handleActionsheet" size="sm" class="dawn-btn-sm dawn-btn-sm__pay">
									<text class="tn-icon-image-text-fill">单据明细</text>
								</tn-button>
							</view> -->
						</view>
					</view>
				</view>

				<view class="tn-bg-white dawn-shadow tn-padding dawn-radius tn-margin-top-sm">
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">缴费商户</view>
						</view>
						<view class="list__right list-text__right">
							{{appConfig.appTitle || '' }}
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">缴费业务</view>
						</view>
						<view class="list__right list-text__right">
							<tn-tag
								class="dawn-tag-sm dawn-tag-sm__4">{{ orderInfo.orderName  || '' }}</tn-tag>
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">订单号</view>
						</view>
						<view class="list__right list-text__right">
							{{ queryData.orderNumber}}
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">身份证</view>
						</view>
						<view class="list__right list-text__right"  v-if="orderInfo.orderName === '病案复印'">
							{{ orderInfo.patientCardNo }}
						</view>
						<view class="list__right list-text__right" v-else >
							{{ orderInfo.idCardNo  || orderInfo.cardNo }}
						</view>
					</view>
					<view class="list-text" v-if="orderInfo.orderName !== '病案复印'">
						<view class="list__left">
							<view class="list__left__text">HIS结帐ID</view>
						</view>
						<view class="list__right list-text__right">
							{{ orderInfo.settleId || orderInfo.procedureId }}
						</view>
					</view>
				</view>

			</view>
			<view v-if="show">
				<dawnMsg :box="dawnMsgBox" :msg="msg"></dawnMsg>
			</view>
		</view>

		<!-- loading -->
		<dawnLoading :show="loading"></dawnLoading>

		<!-- 悬浮按钮-->
		<NavBtn></NavBtn>
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import * as PayApi from "@/api/hospital/pay.js";
	import * as ChsApi from "@/api/hospital/chs.js";
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";

	import chs from "@/libs/chs.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'order',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo', 'patientInfo']),
		data() {
			return {
				iconSize: 38,
				size: 40,
				loading: false,
				show: false,
				msg: '',
				dawnMsgBox: '',
				success: 0,
				successTitle: '正在处理中，请稍候...',
				tabsIndex: 0,
				queryData: {
					pageSize: 10,
					pageNo: 1,
					patientId: '0',
					patientName: '0',
					orderNumber: ''
				},
				status: -1,
				orderInfo: {}
			}
		},
		async onLoad(options) {
			await this.$onLaunched;
			console.info("order return options");
			console.table(options);
			if (!this.isLogin) {
				toLogin();
				return;
			} else {
				this.queryData.orderNumber = options.orderNumber;
				if(this.patientInfo.id){
					this.queryData.pid = this.patientInfo.id;
					this.queryData.userId = this.patientInfo.openid;
					this.queryData.patientId = this.patientInfo.patientId;
					this.queryData.patientName = this.patientInfo.name;
				}
				this.getOrderData();
			}
		},
		methods: {
			getOrderData() {
				let that = this;
				this.loading = true;
				this.show = false;
				this.dawnMsgBox = '';
				this.orderInfo = {};

				var nCount = 0;
				var status = 0;
				var t = setInterval(function() {
					console.info("nCount:" + nCount);
					nCount += 1;
					if (nCount == 10) {
						status = 1;
						clearInterval(t);
						that.loading = false;
						that.success = 2;
						that.successTitle = '缴费失败、请联系管理员';
					}
					if (status == 0) {
						PayApi.orderStatus(that.queryData).then(res => {
							console.table(res);
							if (res.code === 0) {
								that.orderInfo = res.data;
								if (res.data && res.data.procedureStatus === 'success') {
									status = 1;
									clearInterval(t);
									that.loading = false;
									that.successTitle = '订单支付成功';
									that.success = 1;
								} else  if (res.data && res.data.procedureStatus === 'fails'){
									status = 1;
									clearInterval(t);
									that.loading = false;
									that.success = 2;
									that.successTitle = '缴费失败、请联系管理员';
								}
							} else {
								that.show = true;
								that.msg = res.msg;
								that.loading = false;
								clearInterval(t);
							}
						}).catch(err => {
							clearInterval(t);
							that.loading = false;
							that.show = true;
						})
					}
				}, 2000);
			},
			navDetail() {
				if(this.orderInfo.orderName === '病案复印'){
					uni.navigateTo({
						url: '/hosp/medicalcopy/detail?itemId='+this.orderInfo.id
					})	
				} else{
					uni.navigateTo({
						url: '/hosp/order/detail?orderNumber=' + this.queryData.orderNumber
					})	
				}
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			fen2yuan(price) {
				return Util.fen2yuan(price)
			},
			formatDateTime: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dawn-success {
		height: auto;
		z-index: 100;
		padding: 30rpx 0rpx 60rpx 0rpx;
	}

	.list-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0rpx !important;
		border-bottom: 1px solid $dawn-line-color;

		&__right {
			font-size: $dawn-font-size-md;
		}
	}

	.list-icon-text,
	.list-image-text {
		padding: 15rpx 20rpx;
		border-bottom: 1px solid $dawn-theme-color-light;
	}

	.list {
		font-size: 14px;

		&__left {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			&__icon,
			&__image {
				margin-right: 18rpx;
			}

			&__image {
				margin-right: 18rpx;
				width: 60rpx;
				height: 60rpx;
			}
		}

		&__right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	/* 卡 */
	.button-vip {
		width: 100%;
		height: 240rpx;
		border-radius: $dawn-border-radius;
		position: relative;
		z-index: 1;

		&::after {
			content: " ";
			position: absolute;
			z-index: -1;
			width: 100%;
			height: 100%;
			left: 0;
			bottom: 0;
			border-radius: inherit;
			opacity: 1;
			transform: scale(1, 1);
			background-size: 100% 100%;
		}
	}
</style>